import React, { Component } from 'react'
import { Button, Table, Modal, Form, Input, message } from 'antd'

import axios from 'axios'

class Category extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            editId: '',  // 修改的记录的 ID
            total: 0 ,  // 总的记录数
            page: 1,   // 每几页
            page_size: 2,  // 每页的条数
            showDialog: false,  // 是否显示对话框
            data: [],
            columns: [
                {
                    title: '编号',
                    dataIndex: 'id'
                },
                {
                    title: '分类名称',
                    dataIndex: 'cat_name'
                },
                {
                    title: '操作',
                    align: 'center',
                    render: (record) => (
                        <div>
                            <Button onClick={()=>{ this.edit(record.id) }} size="small">修改</Button>
                            &nbsp;
                            <Button onClick={()=>{ this.delete(record.id) }} size="small" type="danger">删除</Button>
                        </div>
                    )
                }
            ]
        }
    }
    
    edit = id => {

        // 根据 id 查询出这条记录（find：从数组中取出数据）
        let data = this.state.data.find(v=>v.id === id)

        // 放到表单中
        this.props.form.setFieldsValue({
            cat_name: data.cat_name
        })

        // 显示弹出框
        this.setState({
            showDialog: true,
            editId: id
        })
    }

    delete = id => {
        // 弹出确认框
        Modal.confirm({
            title: '确定要删除吗？',
            content: '一旦删除，不能恢复！',
            onOk: () => {
                // 调用接口
                axios.delete('/admin/categories/'+id).then(res=>{
                    if(res.data.ok === 1) {
                        message.success('删除成功！')

                        // 判断是否是当前页的最后一条记录
                        if(this.state.data.length === 1) {
                            // 修改当前页为上一页
                            this.setState({
                                page: this.state.page - 1
                            })
                            // 获取上一页的数据
                            this.getData(this.state.page - 1)
                        } else {
                            // 获取当前页数据
                            this.getData()
                        }
                                                

                    } else {
                        message.error(res.data.error)
                    }
                })
            }
        })
    }

    // 在页面显示出来之后调用接口取数据
    componentDidMount() {
        this.getData()
    }

    pageChanged = (page) => {
        console.log(page)
        // 修改当前页码
        this.setState({
            page
        })

        this.getData(page) 
    }

    // 获取某一页的数据，如果 page 没有传，就获取当前页的数据
    getData = (page) => {
        // 刷新页面显示新添加的数据
        axios.get(`/admin/categories?page=${page || this.state.page}&page_size=${this.state.page_size}`).then(res=>{
            this.setState({
                data: res.data.data,
                total: res.data.total
            })
        })
    }

    // 添加按钮
    add = () => {
        this.setState({
            showDialog: true,
            editId: ''
        })
    }

    // 取消按钮
    cancelClicked = () => {

        // 清空表单
        this.props.form.resetFields()

        // 隐藏弹出框
        this.setState({
            showDialog: false
        })
    }

    // ok 按钮
    okClicked = () => {
        // 验证表单中的数据
        this.props.form.validateFields((err, values) => {
            if(!err) {

                // 判断是否有 editId
                if(this.state.editId === '') {
                    axios.post('/admin/categories', values).then(res=>{
                        if(res.data.ok === 1) {
                            message.success('添加成功')
                            
                            // 重新获取每一页数据
                            this.getData(1)
    
                            // 清空表单数据
                            this.props.form.resetFields()
    
                            // 关闭框并清除图片
                            this.setState({
                                showDialog: false
                            })
                        } else {
                            message.error(res.data.error)
                        }
                    })
                } else {
                    axios.put('/admin/categories/' + this.state.editId, values).then(res=>{
                        if(res.data.ok === 1) {
                            message.success('修改成功')

                            this.getData()
    
                            // 清空表单数据
                            this.props.form.resetFields()
    
                            // 关闭框并清除图片
                            this.setState({
                                showDialog: false
                            })
                        } else {
                            message.error(res.data.error)
                        }
                    })
                }
            }
        })
    }

    render() {

        const { getFieldDecorator } = this.props.form

        return (
            <div>

                <Button type="danger" onClick={this.add}>添加新记录</Button>
                <br/><br/>
                <Table 
                rowKey='id'
                columns={this.state.columns}
                dataSource={this.state.data}
                pagination={{
                    onChange: this.pageChanged,
                    total: this.state.total,
                    pageSize: this.state.page_size,
                    current: this.state.page,
                    showTotal: (total, range) => `共有 ${total} 条，当前显示的是第 ${range[0]} 条 ~ ${range[1]} 条`
                }}
                />
                {/* 添加表单 */}
                <Modal
                title={this.state.editId === '' ? '添加新记录' : '修改记录'}
                visible={this.state.showDialog}
                onOk={this.okClicked}
                onCancel={this.cancelClicked}
                >
                    <Form>
                        <Form.Item>
                            {
                                getFieldDecorator('cat_name', {
                                    rules: [{
                                        required: true,
                                        message: '分类名称不能为空'
                                    }]
                                })(
                                    <Input
                                    placeholder="请输入分类名称"
                                    />
                                )
                            }
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}

export default Form.create()(Category)